<template>
<h1>web</h1>

<div id="main" style="width: 600px;height:400px;">

</div>


</template>




<script setup>
import * as echarts from 'echarts';
import { ref,onMounted } from 'vue'


const datalist = ref([])
const valuelist = ref([])




const initecharts = ()=>{
    
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
    xAxis: {
        type: 'category',
        data: datalist.value
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
        data: valuelist.value,
        type: 'bar',
      
        }
    ]
    };

    option && myChart.setOption(option);
}






const socket = ref(null)



const initwesockt=()=>{
    socket.value = new WebSocket("ws://127.0.0.1:8000/webs/1/");

    // 当客户端和服务端刚创建好连接(self.accept)之后，自动触发.
    socket.value.onopen =  (event)=>{
        console.log("连接成功")
    }

    // 回调函数，客户端接收服务端消息
    socket.value.onmessage =  (event)=>{
        console.log("收到消息",event)
        let data = JSON.parse(event.data)
        datalist.value=data[0]
        valuelist.value=data[1]
        
        initecharts()




        // list1.value.push(JSON.parse(event.data))
    }

    // // 当断开连接时，触发该函数
    // this.socket.onclose =function (event){
    // let tag = document.createElement("div");
    // tag.innerText = "[连接断开]";
    // document.getElementById("message").appendChild(tag);
    // }


}

onMounted(()=>{
    initwesockt()

})


</script>




<style scoped>




</style>